
import React, { Component } from "react";
import styles from './index.css'
import Menus from '../components/menu/menu'
import { Layout, Avatar, Badge, Typography, Menu, Dropdown } from 'antd';
import {  BellOutlined, ToolOutlined, LogoutOutlined, PlayCircleOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import admins from '../assets/images/admin.jpg';

const { Text  } = Typography;
const { Header, Footer, Content, Sider } = Layout;

const menu = (
    <Menu style={{zIndex:99999999999999,position:'relative',top:9}}>
      <Menu.Item key="0" style={{height:39, width:170}}>
        <a onClick={()=>{
            let host = window.location.origin;
            window.location =`${host}/#/account`;
        }}><ToolOutlined /> 账号设置</a>
      </Menu.Item>
      <Menu.Item key="1" style={{height:39, width:170}}>
        <a onClick={()=>{
            window.sessionStorage.clear(); //删除所有值。
            let host = window.location.origin;
            window.location =`${host}/#/login`;
        }}><LogoutOutlined /> 退出</a>
      </Menu.Item>
    </Menu>
  );

  const noticeList = (
    <Menu style={{zIndex:99999999999999,position:'relative',top:9}}>
      <Menu.Item key="0" style={{height:39, width:170}}>
        <Badge dot={true}>
          <a onClick={()=>{
            let host = window.location.origin;
            window.location =`${host}/#/infoDetail`;
          }}><CheckCircleOutlined style={{color:'#87d068'}} /> 项目审批通过</a>
        </Badge>
      </Menu.Item>
      <Menu.Item key="1" style={{height:39, width:170}}>
        <Badge dot={false} >
          <ClockCircleOutlined style={{color:'#87d068'}} /><span onClick={()=>{
            let host = window.location.origin;
            window.location =`${host}/#/approvalDetail`;
          }} style={{color:'#999'}}> 资金待审批</span>
        </Badge>
      </Menu.Item>
      <Menu.Item key="2" style={{height:39, width:170}}>
        <Badge dot={true}>
          <a onClick={()=>{
            let host = window.location.origin;
            window.location =`${host}/#/scenicSpot`;
          }}>
            <ExclamationCircleOutlined styles={{color:'#108ee9'}} /> 景区信息采集完成
          </a> 
        </Badge>
      </Menu.Item>
      <Menu.Item key="3" style={{height:39, width:170}}>
        <Badge dot={true}>
          <a onClick={()=>{
            let host = window.location.origin;
            window.location =`${host}/#/infoDetail`;
          }}><CloseCircleOutlined style={{color:'#f50'}} /> 审批驳回,点击查看</a> 
        </Badge>
      </Menu.Item>   
      <Menu.Item key="4" style={{height:39, width:170}}>
        <Badge dot={false}>
          <CheckCircleOutlined style={{color:'#87d068'}} /> <span onClick={()=>{
            let host = window.location.origin;
            window.location =`${host}/#/cityPlan`;
          }} style={{color:'#999'}}>项目规划审批通过</span> 
        </Badge>
      </Menu.Item>   
    </Menu>
  );
export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
        collapsed: false,
        year: null,
        month: null,
        data: null,
        hour: null,
        minute: null,
        seconds: null,
        user:''
    };
  }

  componentDidMount() {
    setInterval(() => {
        this.getTime();
    }, 1000);
    console.log('children',this.props.history);
    let user = window.sessionStorage.getItem('user');
    if(user == null){
        this.props.history.push('/login');
    }else{
      this.setState({user});
    }
    window.scrollTo(0, 0);
  }

  onCollapse = collapsed => {
    this.setState({ collapsed });
  };

  getTime = () => {
    let datas = new Date();
    this.setState({
        year: datas.getFullYear(),
        month: (datas.getMonth())+1,
        data: datas.getDate(),
        hour: datas.getHours(),
        minute: datas.getMinutes(),
        seconds: datas.getSeconds(),
    })
  }

  Screen = () =>{
    this.props.history.push('/screen')
    console.log('ssss',this.props.history)
        
  }

  render() {
    const { collapsed, year, month, data, hour, minute, seconds, user } = this.state;
    return (
        <>
            <Layout style={{ minHeight: '100vh' }}>
                <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                    <Menus collapsed={collapsed} />
                </Sider>
                <Layout>
                <Header style={{position:'fixed',zIndex:100,height:55}}>
                    <div style={{marginLeft:'77%', height:50, lineHeight:'45px',cursor:'pointer'}}>
                        <span style={{cursor: 'pointer'}} onClick={this.Screen}>
                            <span style={{color:'#fff',fontSize:15,position:'relative',top:8,left:-13}}><PlayCircleOutlined /> 进入大屏</span>
                        </span>
                        <span style={{position:'relative',top:10}}>
                          <Dropdown overlay={noticeList} trigger={['click']} >
                            <Badge count={3}  offset={[-3, 3]}>
                                <BellOutlined style={{color:'#fff',fontSize:25}} />
                            </Badge>  
                          </Dropdown>
                        </span>
                        <Avatar style={{marginLeft:17,marginTop:2}} size="large"  src={admins} /> 
                        <Dropdown overlay={menu} trigger={['click']} >
                            <span style={{position:'relative',top:6,left:-2,color:'#fff'}}><Text style={{color:'#fff', marginLeft:10, fontSize:16}} level={4}>{user}</Text ></span>
                        </Dropdown>
                    </div>
                </Header>
                <Content history={this.props.history} style={{ margin:'80px 15px 30px 15px',backgroundColor:'#fff' }}>
                    <div style={{width:'100%',height:'100%'}}>
                        {
                            this.props.children
                        }
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center', background:'#dfdfdf', padding:'10 0'}}>西安城市运营中心后台管理系统 ©{year} Created by Chris Li  {year}/{month}/{data} {hour}:{minute}:{seconds}</Footer>
                </Layout>
            </Layout>        
        </>
    )}
}
